<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    .bucket{width: 100%;height: 340px;min-height: 340px;border: 1px solid #D5D5D5;border-radius: 3px;box-shadow: 0 0 3px #d5d5d5;}

    /*头部*/
    .bucketHeader{height: 39px;line-height: 39px;color:#636363;border-bottom: 1px solid #ccc;background:#F1F1F1;text-align: center;font-size: 12px;font-weight: bold;text-align: left;padding-left: 15px;}

    /*中部*/
    .bucketContent{height:300px;background: #DBEAF6;}
    #box{height:300px;width: 100%;position: relative;}
    .boxTitle{font-size: 12px;font-weight: bold;color: #0028f2;text-align: center;padding: 0;margin: 0;display: block;height: 30px;line-height: 30px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
    .boxApproved{width: 100%;position: absolute;bottom: 0;left: 0;overflow: hidden;background: #C4DFF5;}
    .approvedTitle{margin: 0;padding: 0;display:block;height: 30px;line-height: 30px;color: #0061f2;font-weight: bold;text-align: center;font-size: 12px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

    .listBox{float: left;margin-left: 15px;}
    .flTotal,
    .tjTotal,
    .cgTotal{padding:0;margin:0;font-weight: bold;font-size: 12px;text-align: center;display: block;height: 40px;line-height: 40px;cursor: pointer;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
    .flTotal{color: #70B517;}
    .tjTotal{color: #EA7854;}
    .cgTotal{color: #11B4FF;}

    .fl,
    .tj,
    .cg{background: #DADEE3;border-radius: 5px;position: relative;}
    .flFinish,
    .tjFinish,
    .cgFinish{position: absolute;bottom: 0;left: 0;font-size: 12px;text-align: center;cursor: pointer;}
    .flFinishPercent,
    .tjFinishPercent,
    .cgFinishPercent{margin:0;padding:0;display: block;height: 15px;line-height: 15px;position: relative;cursor: pointer;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

    .flFinish{background: #70B517;}
    .tjFinish{background: #EA7854;}
    .cgFinish{background: #11B4FF;}

    /*底部*/
    .flPercent,
    .tjPercent,
    .cgPercent{padding:0;margin:0;display:block;height: 40px;line-height: 40px;text-align: center;font-size: 12px;color: #9D9D9D;font-weight: lighter;cursor: pointer;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
  </style>
  <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
  <!--面板-->
  <div class="bucket">
    <div class="bucketHeader">业务矩阵</div>
    <div class="bucketContent">
      <div id="box"></div>
    </div>
  </div>

  <script src="list2.js"></script>
  <!--用法一-->
  <!--<script>-->
    <!--$(document).ready(function(){-->
      <!--$("#box").bucketList();-->
    <!--});-->
    <!--$(window).resize(function(){-->
      <!--$("#box").bucketList();-->
    <!--});-->
  <!--</script>-->



<!--用法二-->
  <script>
    $(document).ready(function(){
      $.getJSON("data.json",function(data){
        $("#box").bucketList(data);
      })
    });
    $(window).resize(function(){
      $.getJSON("data.json",function(data){
        $("#box").bucketList(data);
      })
    });
  </script>
</body>
</html>